<template>
  <div>
    <div class="mt-[32px]">
      <el-form label-width="85px" :rules="rules" :model="form" ref="FormRef">
        <el-form-item :label="item.name" :prop="item.code"
                      v-for="(item,index) in config"
                      :key="index"
        >
          <el-input v-model="form[item.code]"/>
        </el-form-item>
      </el-form>

      <div class="mt-[30px] text-[#999999] mb-[30px] flex-center">输入应付金额1000，有5个sku，分别采购2个，则每个采购单价为100</div>
    </div>

  </div>
</template>
<script setup lang="ts">
import {listToMap, formError} from "@/utils";

const message = useMessage() // 消息弹窗

const props = defineProps({
  info: {
    type: Object,
    required: false,
    default: () => {
    }
  }
})

const FormRef = ref(null)
const config = ref([
  {
    name: "应付金额",
    code: "money",
  }
])

const rules = computed(() => {
  let map = listToMap(config.value, 'code');
  for (let i in map) {
    map[i] = [{required: true, message: `请输入${map[i].name}`, trigger: 'blur'}]
  }
  return map
})

const form = ref({})

const confirm = async () => {
  return new Promise((resolve, reject) => {
    FormRef.value && FormRef.value.validate(async bool => {
      if (bool) {

        resolve(form.value)
      } else {
        formError()
        reject();
      }
    })
  })


}


onMounted(() => {
})

defineExpose({
  confirm
})

watch(() => props.info, () => {
  form.value = {}
}, {
  deep: true,
  immediate: true
})
</script>
<style lang="scss" scoped>

</style>
